<template>
    <div class="user_client_form_container">
        <vxe-table-template :data="dataList" :options.sync="tableOptions"
                            @event="handleTableEvent" />
    </div>
</template>

<script>
import base from '@common/components/dialog/base.js'

export default {
    extends: base,
    name: 'UserClientForm',
    data() {
        const _this = this;
        return {
            userClientList: [],
            dataList: [],
            selectionList: [],
            checkList: [],
            tableOptions: {
                ref: "UserClientFormTable",
                container: ".user_client_form_container",
                multiSelect: true,
                reserveSelection: true,
                rowId: 'sid',
                columns: [
                    {
                        label: "用户名",
                        prop: "loginId",
                        align: "center",
                    },
                    {
                        label: "角色",
                        prop: "role_name",
                        align: "center",
                    },
                    {
                        label: "姓名",
                        prop: "name",
                        align: "center",
                    },
                    {
                        label: "部门",
                        prop: "groupName",
                        align: "center",
                    },
                    {
                        label: "最近一次登录",
                        prop: "lastLoginedDate",
                        align: "center",
                        minWidth: "120",
                    },
                ],
                pagination: {
                    pageIndex: 1,
                },
                getMaxHeight() {
                    return $(_this.getActiveTabsContainer()).height() * 0.8 - 100;
                },
            },
        }
    },
    methods: {
        async init() {
            const _this = this
            if (_this.propsData.init) {
                return
            }
            _this.checkList = [];
            await _this.initUserClientList();
            _this.initList();
        },
        initList() {
            const _this = this;
            _this.dataList = [];
            let queryData = _this.getQueryParams(_this.tableOptions);
            queryData.client_sid = _this.propsData.row.sid;
            return _this.fetchData(_this.$api.API_FindSysUsers, queryData).then(result => {
                _this.dataList = result.data || [];
                _this.tableOptions = _this.setTableTotal(_this.tableOptions, result);
                _this.$nextTick(() => {
                    if (_this.$utils.isNotEmptyList(_this.checkList)) {
                        _this.checkList.forEach(item => {
                            let filter = _this.dataList.filter(t => item.user_sid === t.sid);
                            if (_this.$utils.isNotEmptyList(filter)) {
                                _this.UserClientFormTable.setCheckboxRow(filter[0], true);
                            }
                        });
                    }
                });
            }).catch(() => {
            });
        },
        handleTableEvent(event) {
            if (event.type === 'page') {
                this.changePageCoreRecordData();
                this.initList();
                return;
            }
            if (event.type === 'selectionChange') {
                this.selectionList = event.value;
            }
        },
        changePageCoreRecordData() {
            const _this = this;
            // 获取当前页选中的记录
            let selectionList = _this.UserClientFormTable.getCheckboxRecords(true);
            // 获取当前页的用户sid列表
            let currPageUserList = _this.dataList.map(item => item.sid);
            // 移除当前页所有选中的记录
            let checkList = _this.checkList.filter(item => currPageUserList.indexOf(item.user_sid) === -1);
            // 重新加入当前页选中的记录
            let selection = selectionList.map(item => {
                return {
                    client_sid: _this.propsData.row.sid,
                    user_sid: item.sid,
                };
            });
            _this.checkList = checkList.concat(selection);
        },
        initUserClientList() {
            const _this = this;
            _this.userClientList = [];
            return _this.fetchData(_this.$api.API_FindSysUserClients, {
                nopage: '1',
            }).then(result => {
                _this.userClientList = result.data || [];
                _this.checkList = _this.userClientList.map(item => $.extend({}, item));
            }).catch(() => {
            });
        },
        async confirm() {
            const _this = this;
            _this.changePageCoreRecordData();
            let sys_user_list = _this.checkList.map(item => {
                let obj = $.extend({}, item);
                let filter = _this.userClientList.filter(t => t.user_sid === item.user_sid);
                if (_this.$utils.isNotEmptyList(filter)) {
                    obj.id = filter[0].id;
                    obj.sid = filter[0].sid;
                }
                return obj;
            });
            return _this.fetchData(_this.$api.API_SettingClientSysUser, {
                client_sid: _this.propsData.row.sid,
                sys_user_list,
            }).then(() => {
                _this.$message.success('保存成功！');
                return true;
            }).catch(() => {
                return false;
            });
        },
    }
}
</script>

<style lang="less" rel="stylesheet/less" scoped>
.user_client_form_container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
</style>
